<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格布局</title>
    <style>
        body {
            width: 90%;
            max-width: 900px;
            margin: 2em auto;
            font: 1em/1.2;
        }

        .container {
            display: grid;
            grid-template-columns: 3fr 1fr;
            grid-gap: 20px;
        }

        header {
            grid-column: 1 / 3;
            grid-row: 1;
        }

        article {
            grid-column: 1;
            grid-row: 2;
        }

        aside {
            grid-column: 2;
            grid-row: 2;
        }

        footer {
            grid-column: 1 / 3;
            grid-row: 3;
        }

        footer {
            border-radius: 5px;
            padding: 10px;
            background-color: rgb(206, 205, 205);
            font-size: small;
            /* border: 2px solid rgba(227, 84, 79, 0.692); */
        }

        aside {
            border-left: 1px solid #999;
            padding-left: 10px;
        }

    </style>
</head>

<body>
    <div class="container">
        <header>这里放置导航条 </header>
        <article>
            <h1>文章标题</h1>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio maiores commodi, ipsa possimus
                voluptatibus perspiciatis, maxime exercitationem id eveniet beatae architecto, eos iure recusandae
                reiciendis numquam sed reprehenderit rem dolores.</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure provident vero nisi eos, mollitia ducimus!
                Minus quos, nam perferendis inventore nesciunt quibusdam consectetur vitae. Illum, accusamus? Est
                dignissimos nam eligendi.
                Et exercitationem natus, vitae rem in, magni hic culpa molestias aspernatur esse corrupti molestiae
                tenetur, quas error ad voluptatem similique quibusdam. Omnis et voluptatibus iusto asperiores voluptatum
                error reiciendis! Nemo.
                Commodi officiis exercitationem dignissimos. Ratione deleniti nesciunt harum vitae alias! Ipsa, voluptas
                illo. Deleniti aspernatur incidunt mollitia repudiandae praesentium, doloribus nulla autem velit
                adipisci ab quam officiis. Animi, quam deleniti.</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure provident vero nisi eos, mollitia ducimus!
                Minus quos, nam perferendis inventore nesciunt quibusdam consectetur vitae. Illum, accusamus? Est
                dignissimos nam eligendi.
                Et exercitationem natus, vitae rem in, magni hic culpa molestias aspernatur esse corrupti molestiae
                tenetur, quas error ad voluptatem similique quibusdam. Omnis et voluptatibus iusto asperiores voluptatum
                error reiciendis! Nemo.
                Commodi officiis exercitationem dignissimos. Ratione deleniti nesciunt harum vitae alias! Ipsa, voluptas
                illo. Deleniti aspernatur incidunt mollitia repudiandae praesentium, doloribus nulla autem velit
                adipisci ab quam officiis. Animi, quam deleniti.</p>
        </article>
        <aside>
            <h2>侧边栏</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos odio, enim iure ratione sed perspiciatis
                veniam, consequuntur eum illum voluptas tenetur ducimus. Optio, ducimus cumque maxime dolorem veniam est
                ipsam.</p>
        </aside>
        <footer>这里放置版权信息等内容</footer>
    </div>
</body>

</html>
